MCP: visualize members and MCP status in header area #386
Conversation
There was a problem hiding this comment.
Pull request overview
This PR enhances the MCP (Managed Control Plane) page by moving the MCP health status from the actions bar to the header area and adding a new members visualization component. The changes improve the visibility of key information by consolidating status and member information in a prominent location.
Key Changes:
- Relocated MCP health status from actions bar to header with enhanced styling (large mode with color-coded status)
- Added members avatar view in header showing role bindings converted to member format
- Enhanced AnimatedHoverTextButton component to support both Button and Link modes with conditional styling
Reviewed changes
Copilot reviewed 12 out of 12 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/spaces/mcp/pages/McpPage.tsx | Removes MCPHealthPopoverButton from actions bar and adds FlexBox layout in header with McpHeader, McpStatusSection, and McpMembersAvatarView |
| src/hooks/useConvertRoleBindingsToMembers.ts | New utility function to convert role bindings array into Member objects with aggregated roles |
| src/components/Members/MemberTable.tsx | Adds optional hideNamespaceColumn prop to conditionally hide namespace column |
| src/components/Helper/AnimatedHoverTextButton.tsx | Enhanced to support large mode with Link component option and status-based color styling |
| src/components/Helper/AnimatedHoverTextButton.module.css | New CSS for text styling, status colors (ready/not-ready/deleting), and large text mode |
| src/components/ControlPlanes/McpMembersAvatarView/McpMembersAvatarView.tsx | New component displaying members count and avatar view with role bindings |
| src/components/ControlPlanes/McpMembersAvatarView/McpMembersAvatarView.module.css | Styling for members title label |
| src/components/ControlPlanes/List/MembersAvatarView.tsx | Passes hideNamespaceColumn prop through to MemberTable |
| src/components/ControlPlane/McpStatusSection.tsx | New component wrapping MCPHealthPopoverButton with status label |
| src/components/ControlPlane/McpStatusSection.module.css | Styling for status label |
| src/components/ControlPlane/MCPHealthPopoverButton.tsx | Adds large prop support, extracts getClassNameForOverallStatus, updates icon colors to use CSS variables |
| public/locales/en.json | Adds translation key for "status" |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
Can we make status more 'button-like'? It behaves a bit weird and sometime when i click it only highlight name instead of opening status table. |
Fixed |
What this PR does / why we need it:
MCP: visualize members and MCP status in header area